<template>
  <div class="tableList">
    <div>
      <el-input
        v-model="search"
        placeholder="请输入内容"
        style="width: 25%"
      ></el-input>
      <el-button
        type="info"
        icon="el-icon-search"
        class="searchBtn"
        @click="searchClick"
      ></el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="订单编号">
        <template slot-scope="scope">
          <span>{{ scope.row.order_number }}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单价格">
        <template slot-scope="scope">
          <span>{{ scope.row.order_price }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否付款">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.order_pay === '0'" type="danger"
            >未付款</el-tag
          >
          <el-tag v-else type="success">已付款</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="是否发货">
        <template slot-scope="scope">
          <span>{{ scope.row.is_send }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下单时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            class="ope"
            @click="editOrder(scope.row)"
            v-has="154"
            :disabled="!$store.state.btn_permission.includes('154')"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-location-information"
            class="ope"
            @click="showOrderProgress"
            v-has="155"
            :disabled="!$store.state.btn_permission.includes('155')"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageNum"
      :total="total"
      layout="total, prev, pager, next, jumper"
    >
    </el-pagination>

    <!-- 编辑弹框 -->
    <edit-dialog></edit-dialog>
    <order-progress></order-progress>
  </div>
</template>

<script>
import { getOrderList, getOrderTotalNum } from "@/api/order";
import editDialog from "./editDialog";
import orderProgress from "./orderProgress";

export default {
  name: "tableList",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      search: "",
      currentPage: 1,
      pageNum: 8,
      total: 0,
    };
  },
  components: { editDialog, orderProgress },
  created() {
    this.initOrderTotalNum();
    this.initTableList();
  },
  mounted() {
    //更改成功刷新
    this.$bus.$on("changeOrderSuc", () => {
      this.initTableList();
    });
  },
  methods: {
    initOrderTotalNum() {
      getOrderTotalNum(this.search).then(
        (res) => {
          // console.log(res);
          this.total = res.data.total;
        },
        (err) => {
          console.warn(err);
        }
      );
    },
    initTableList() {
      getOrderList(this.currentPage, this.pageNum, this.search).then(
        (res) => {
          // console.log(res);
          this.tableData = res.data.data;
        },
        (err) => {
          console.warn(err);
        }
      );
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      //更新数据
      this.initTableList();
    },
    //显示弹框：编辑订单
    editOrder(row) {
      // console.log(row);
      this.$bus.$emit(
        "orderVisible",
        row.order_id,
        row.order_price,
        row.order_pay,
        row.is_send
      );
    },
    //显示弹框：查看物流
    showOrderProgress() {
      this.$bus.$emit("orderProVisible");
    },
    searchClick() {
      this.initOrderTotalNum();
      this.initTableList();
    },
  },
};
</script>

<style  scoped>
.tableList {
  padding: 20px;
}
::v-deep .el-input__inner,
.el-button {
  border-radius: 0;
}

.el-table,
.el-pagination {
  margin-top: 15px;
}
.ope {
  position: relative;
  border-radius: 5px;
}

.ope ::v-deep [class^="el-icon-"] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ope {
  width: 46px;
  height: 30px;
}
.el-table {
  border-collapse: collapse;
}
.el-pagination {
  text-align: center;
}
</style>
